<extend name="Public/user"/>
<block name="link">
	<title>包裹列表</title>
	<link href="/static/lida/css/tran_style.css" rel="stylesheet" type="text/css" />
	<link href="__CSS__/bootstrap.min.css" rel="stylesheet"/>
	<script src="__JS__/jquery.js"></script>
	<script src="__JS__/bootstrap.js"></script>
	<link href="__CSS__/grsz-style.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="__CSS__/common.css">

</block>
<block name="user-right">
	<link rel="stylesheet" type="text/css" href="__CSS__/jquery.Jcrop.min.css" media="all">
	<link rel="stylesheet" type="text/css" href="__JS__/uploadify-v3.1/uploadify.css" media="all">
	<script type="text/javascript" src="__JS__/uploadify-v3.1/jquery.uploadify.min.js"></script>
	<script type="text/javascript" src="__JS__/jquery.Jcrop.min.js"></script>
	<style type="text/css">
		.main1{
			margin: 30px auto;
			padding: 20px;
			width: 550px;
			font-family: "microsoft yahei";
			background-color: #F5F5F5;
		}
		.cf:before,.cf:after {
			display: table;
			content: "";
			line-height: 0;
		}
		.cf:after {
			clear: both;
		}
		.cf {
			*zoom: 1;
		}
		.upload-area {
			position: relative;
			float: left;
			margin-right: 30px;
			width: 200px;
			height: 200px;
			background-color: #F5F5F5;
			border: 2px solid #E1E1E1;
		}
		.upload-area .file-tips {
			position: absolute;
			top: 90px;
			left: 0;
			padding: 0 15px;
			width: 170px;
			line-height: 1.4;
			font-size: 12px;
			color: #A8A8A3;
			text-align: center;
		}
		.userup-icon {
			display: inline-block;
			margin-right: 3px;
			width: 16px;
			height: 16px;
			vertical-align: -2px;
			background: url("__IMG__/userup_icon.png") no-repeat;
		}
		.uploadify-button {
			line-height: 120px!important;
			text-align: center;
		}
		.preview-area {
			float: left;
		}
		.tcrop {
			clear: right;
			font-size: 14px;
			font-weight: bold;
		}
		.update-pic .crop {
			background: url("__JS__/uploadify-v3.1/mystery.png") no-repeat scroll center center #EEEEEE;
			float: left;
			margin-bottom: 20px;
			margin-top: 10px;
			overflow: hidden;
		}
		.crop100 {
			height: 100px;
			width: 100px;
		}
		.crop60 {
			height: 60px;
			margin-left: 20px;
			width: 60px;
		}
		.update-pic .save-pic {
			clear: left;
			margin-right: 20px;
		}
		.update-pic .uppic-btn {
			background-color: #348FD4;
			color: #FFFFFF;
			display: block;
			float: left;
			font-size: 16px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			vertical-align: middle;
			width: 89px;
		}
		.preview {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
			width: 200px;
			height: 200px;
			overflow: hidden;
			background:#fff;
			display: none;
		}
	</style>
	<!--main_right-->
	<div class="main_r f_fr">
		<div class="user_kx">
			<h3 class="user_kx_title">
				{:lang('setting_user')}

			</h3>
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" ><a href="#home" aria-controls="home" role="tab" data-toggle="tab">{:lang('default_set')}</a></li>
				<li role="presentation" ><a href="{:url('User/setpass')}" >{:lang('change_pass')}</a></li>
				<li role="presentation" class="active"><a href="{:url('User/settouxiang')}" >{:lang('change_avatar')}</a></li>
			</ul>



			<div role="tabpanel" class="tab-pane" id="messages">
				<div class="menu_xuigai f_fl">
					<form id="pic" class="update-pic cf w200 f_fl" method="post" >
						<div class="upload-area" style="width:200px;float:left;">
							<input type="file" id="user-pic">
							<div class="file-tips">{:lang('avatar_info')}</div>
							<div class="preview hidden" id="preview-hidden"></div>
						</div>
					</form>
					<div class="preview-area" >
						<input type="hidden" id="x" name="x" />
						<input type="hidden" id="y" name="y" />
						<input type="hidden" id="w" name="w" />
						<input type="hidden" id="h" name="h" />
						<input type="hidden" id='img_src' name='src'/>
						<div class="tcrop">{:lang('avatar_preview')}</div>
						<div class="crop crop100"><img id="crop-preview-100" src="" alt=""></div>
						<div class="crop crop60"><img id="crop-preview-60" src="" alt=""></div>
						<a class="uppic-btn save-pic btn btn-default uppic-btn save-pic w100" href="javascript:;">{:lang('submit')}</a>
						<a class="uppic-btn reupload-img btn btn-default uppic-btn reupload-img w100" href="javascript:$('#user-pic').uploadify('cancel','*');">{:lang('re_submit')}</a>

					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$('form').submit(function(){
				var self = $(this);
				$.post(self.attr("action"), self.serialize(), success, "json");
				return false;
				function success(data){
					if (data.status) {
						$.thinkbox.success(data.info);
						setTimeout(jumpurl(data.url),1500);
					}else{
						$.thinkbox.error(data.info);
					};
				}
			})
			//上传头像(uploadify插件)
			$("#user-pic").uploadify({
				'queueSizeLimit' : 1,
				'removeTimeout' : 0.5,
				'preventCaching' : true,
				'multi'    : false,
				//'formData' : "{'session_id' : sid}",
				'swf' 			: '__JS__/uploadify-v3.1/uploadify.swf',
				//'uploader' 		: "{:url('User/uploadimg','uid='.$user['uid'])}",
				'uploader' 		: "{:url('User/uploadimg')}",
				'buttonText' 	: '<i class="userup-icon"></i>{:lang("avatar_up")}',
				'width' 		: '200',
				'height' 		: '200',
				'fileTypeExts'	: '*.jpg; *.png; *.gif;',
				'onUploadSuccess' : function(file,data,response){
					var data = $.parseJSON(data);
					if(data['status'] == 0){
						$.thinkbox.error(data['info']);
						return false;
					}
					var preview = $('.upload-area').children('#preview-hidden');
					preview.show().removeClass('hidden');
					//两个预览窗口赋值
					$('.crop').children('img').attr('src','__ROOT__'+data['path']+'?random='+Math.random());
					//隐藏表单赋值
					$('#img_src').val(data['path']);
					//绑定需要裁剪的图片
					var img = $('<img />');
					preview.append(img);
					preview.children('img').attr('src','__ROOT__'+data['path']+'?random='+Math.random());
					var crop_img = preview.children('img');
					crop_img.attr('id',"cropbox").show();
					var img = new Image();
					img.src = '__ROOT__'+data['path']+'?random='+Math.random();
					//根据图片大小在画布里居中
					img.onload = function(){
						var img_height = 0;
						var img_width = 0;
						var real_height = img.height;
						var real_width = img.width;
						if(real_height > real_width && real_height > 200){
							var persent = real_height / 200;
							real_height = 200;
							real_width = real_width / persent;
						}else if(real_width > real_height && real_width > 200){
							var persent = real_width / 200;
							real_width = 200;
							real_height = real_height / persent;
						}
						if(real_height < 200){
							img_height = (200 - real_height)/2;
						}
						if(real_width < 200){
							img_width = (200 - real_width)/2;
						}
						preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
						preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});
					}
					//裁剪插件
					$('#cropbox').Jcrop({
						bgColor:'#333',   //选区背景色
						bgFade:true,      //选区背景渐显
						fadeTime:1000,    //背景渐显时间
						allowSelect:false, //是否可以选区，
						allowResize:true, //是否可以调整选区大小
						aspectRatio: 1,     //约束比例
						minSize : [100,100],//可选最小大小
						boxWidth : 200,		//画布宽度
						boxHeight : 200,	//画布高度
						onChange: showPreview,//改变时重置预览图
						onSelect: showPreview,//选择时重置预览图
						setSelect:[ 0, 0, 100, 100],//初始化时位置
						onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
							$('#x').val(c.x);//需裁剪的左上角X轴坐标
							$('#y').val(c.y);//需裁剪的左上角Y轴坐标
							$('#w').val(c.w);//需裁剪的宽度
							$('#h').val(c.h);//需裁剪的高度
						}
					});
					//提交裁剪好的图片
					$('.save-pic').click(function(){
						if($('#preview-hidden').html() == ''){
							$.thinkbox.error('请先上传图片！');
						}else{
							//由于GD库裁剪gif图片很慢，所以长时间显示弹出框
							$.thinkbox.success('{:lang("avatar_chuli")}',{'delayClose':30000});
							$('#pic').submit();
						}
					});
					//重新上传,清空裁剪参数
					var i = 0;
					$('.reupload-img').click(function(){
						$('#preview-hidden').find('*').remove();
						$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
					});
				}
			});
			//预览图
			function showPreview(coords){
				var img_width = $('#cropbox').width();
				var img_height = $('#cropbox').height();
				//根据包裹的容器宽高,设置被除数
				var rx = 100 / coords.w;
				var ry = 100 / coords.h;
				$('#crop-preview-100').css({
					width: Math.round(rx * img_width) + 'px',
					height: Math.round(ry * img_height) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
				rx = 60 / coords.w;
				ry = 60 / coords.h;
				$('#crop-preview-60').css({
					width: Math.round(rx * img_width) + 'px',
					height: Math.round(ry * img_height) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
			}
		})

	</script>
</block>